<template>
  <a-popover
      @visibleChange="visibleChange"
      trigger="click" placement="leftBottom">
    <template #content>
      <a-form
          :colon="false"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          id="fortune-setting-form">
        <a-form-item title="监视器组件间距">
          <template #label>
            <a-space>
              <a-tag color="#f1a402">组件间距</a-tag>
              <column-width-outlined :style="styles.iconLabel" class="theme-color"/>
            </a-space>
          </template>
          <a-slider
              :max="24"
              v-model:value="monitorSpan"
              :min="1"
              @change="monitorSpanChange"
          ></a-slider>
        </a-form-item>
        <a-form-item title="侧边栏菜单宽度">
          <template #label>
            <a-space>
              <a-tag color="#f1a402">菜单宽度</a-tag>
              <column-width-outlined :style="styles.iconLabel" class="theme-color"/>
            </a-space>
          </template>
          <a-slider
              :min="100"
              :step="10"
              v-model:value="sideMenuWidth"
              @change="sideWidthChange"
              :max="500"
          ></a-slider>
        </a-form-item>
        <a-divider>
          <a-tag color="blue">布局</a-tag>
        </a-divider>
        <a-form-item title="自动连接戴森球计划">
          <template #label>
            <a-space>
              <a-tag color="#f1a402">自动连接</a-tag>
              <link-outlined :style="styles.iconLabel" class="theme-color"/>
            </a-space>
          </template>
          <a-switch @click="autoLinkChange" v-model:checked="defaultAutoLink"></a-switch>
        </a-form-item>
        <a-form-item title="使用本地数据源">
          <template #label>
            <a-space>
              <a-tag color="#f1a402">本地数据</a-tag>
              <link-outlined :style="styles.iconLabel" class="theme-color"/>
            </a-space>
          </template>
          <a-switch @click="useLocalDataChange" v-model:checked="defaultUseLocalData"></a-switch>
        </a-form-item>
        <a-divider>
          <a-tag color="blue">数据</a-tag>
        </a-divider>
      </a-form>
    </template>
    <setting-outlined style="color: #f1a402; cursor: pointer;font-size: 24px"/>
  </a-popover>
</template>

<script>
import {SettingOutlined,LinkOutlined,ColumnWidthOutlined} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
export default {
  name: "GlobalSetting.vue",
  setup () {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 }
    }
  },
  components: {
    SettingOutlined,
    LinkOutlined,
    ColumnWidthOutlined
  },
  data() {
    return {
      monitorSpan: this.$store.getters.monitorSpan,
      sideMenuWidth: this.$store.getters.sideMenuWidth,
      defaultAutoLink: this.$store.getters.autoLink,
      defaultUseLocalData: this.$store.getters.useLocalData,
      sideMenuWidthUpdateQueue: [],
      monitorSpanUpdateQueue: [],
      styles: {
        iconLabel: {
          fontSize: '18px'
        }
      }
    }
  },
  methods: {
    visibleChange(visible) {
      message.success(visible ? '打开设置' : '关闭设置');
    },
    monitorSpanChange(span) {
      if (this.monitorSpanUpdateQueue.length < 1) {
        setTimeout(()=>{
          this.$store.commit('changeMonitorSpan', this.monitorSpanUpdateQueue.pop())
          this.monitorSpanUpdateQueue = []
        }, 400)
      }
      this.monitorSpanUpdateQueue.push(span);
    },
    sideWidthChange(width) {
      // 如果改变时更新队列为空，则设置定时任务，定时任务完成后会清除变更队列
      if (this.sideMenuWidthUpdateQueue.length < 1) {
        setTimeout(()=>{
          this.$store.commit('changeSideMenuWidth', this.sideMenuWidthUpdateQueue.pop())
          this.sideMenuWidthUpdateQueue = []
        }, 400)
      }
      this.sideMenuWidthUpdateQueue.push(width);
    },
    autoLinkChange() {
      this.$store.commit('changeAutoLink', this.defaultAutoLink)
    },
    useLocalDataChange() {
      this.$store.commit('switchDataChannel', this.defaultUseLocalData)
    }
  }
}
</script>

<style scoped>
#fortune-setting-form {
  min-width: 360px;
}
</style>
